import React, {Component} from 'react';
import {Grid,Loading} from '@icedesign/base';
import LoginIntro from './LoginIntro';
import LoginForm from './LoginForm';

const {Row, Col} = Grid;

export default class LoginPanel extends Component {
  static propTypes = {};

  static defaultProps = {};
  constructor(props) {
     super(props);
     this.state = {
       visible:false
     }
  }

  render() {
    return (<div style={styles.container}>
        <Row wrap={true} style={styles.row}>
          <Col m="16" s="24" style={styles.col}>
                <LoginIntro/>
          </Col>
          <Col m="8" xxs="24" style={styles.col}>
            <Loading visible={this.state.visible} style={{display: 'block'}} shape="fusion-reactor" color="#007cfc">
              <div style={styles.content}>
                <LoginForm loading={(flag)=>this.setState({visible:flag})}/>
              </div>
            </Loading>
          </Col>
        </Row>
    </div>);
  }
}

const styles = {
  container: {
    position: 'relative',
    width: '100wh',
    // minWidth: '1200px',
    height: '100vh'
  },
  row: {
    padding: '0'
  },
  col: {
    padding: '0'
  },
  content: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    height: '100vh',
    background: '#fff'
  }
};
